<script setup lang="ts">
import { ref, watch } from 'vue'
import { Position } from './packages'

const dragZoomRef = ref()

const position = ref(new Position(10, 10))

watch(position, (v) => {
  console.log(v)
})
</script>

<template>
  <v3-drag-zoom-container
    ref="dragZoomRef"
    class="container"
    :auto-resize="true"
    :follow-pointer="true"
    align="auto"
    style="width: 50%; height: 480px; margin: 100px auto"
  >
    <img src="/src/assets/test1.jpeg" alt="test img">
    <v3-drag-zoom-item
      v-model:position="position"
      style="width: 100px; height: 100px; background-color: darkred"
      :draggable="true"
    />
  </v3-drag-zoom-container>
</template>

<style scoped lang="less">
.container {
  background-color: #f0f0f0;
}
</style>
